<template>
  <div class="form-container">
    <div class="form-item">
      <input type="text" placeholder="输入项1" />
    </div>
    <div class="form-item">
      <input type="text" placeholder="输入项2" />
    </div>
    <div class="form-item">
      <input type="text" placeholder="输入项3" />
    </div>
    <div class="form-item">
      <button type="submit">查询</button>
    </div>
  </div>
</template>

<style lang="scss">
.form-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  @media (max-width: 600px) {
    flex-direction: column;
  }
}
.form-item {
  flex: 1 1 200px;
  margin: 10px;
  @media (max-width: 600px) {
    flex: 1 1 auto;
    margin: 10px 0;
  }
}
.form-item:last-child {
  flex: 1 1 100%;
  @media (min-width: 601px) {
    flex: 1 1 auto;
  }
}
</style>